<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郝珍华">
    <title></title>
    <style>
        body{
            margin: 0;
           
        }
        *{
            box-sizing: border-box;
        }
    .container{
        width: 502px;
        height: 250px;
        border:1px solid #ccc;
        margin: 100px auto;
        

    }
    ul{
        margin: 0;
        padding:0;
        list-style: none;
    }
    .toubu{
        width: 500px;
        height: 36px;
        /* border:1px solid; */
        background-image: url('./img/btn_cartoon.gif');
        background-repeat: no-repeat;
        background-position: 0px 0px;
        display: flex;
      
    }
    .tou1{
        width: 100px;
        height: 36px;
        /* border:1px solid; */
        margin-left: 20px;
         background-image: url('./img/btn_cartoon.gif');
        background-repeat: no-repeat;
         background-position: -2px -101px;
    }
    .baidian{
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100px;
        height: 36px;
        /* border:1px solid; */
        margin-left: 5px;
       
    }
    .baidian .first{
        width: 10px;
        height: 10px;
        float:left;
         background-image: url('./img/btn_cartoon.gif');
        background-repeat: no-repeat;
        background-position: 0 -320px;
        margin-left: 10px;
        margin-top: 10px;
    }
    .baidian li.active{
        background-image: url('./img/btn_cartoon.gif');
          background-position: 0 -220px;
      
    }
    .baoguo{
        /* width: 56px; */
        height: 36px;
        /* border:1px solid; */
         margin-top: 2px;
         display: flex;
         cursor: pointer;
   
    }
    .laihui{
        width: 28px;
        height: 36px;
        /* border:1px solid; */
      
          background-image: url('./img/btn_cartoon.gif');
        background-repeat: no-repeat;
        background-position: -3px -500px;
      
    }
    .laihui:hover{
    
          background-image: url('./img/btn_cartoon.gif');
            background-position: -3px -400px;
    }
    .huilai{
         width: 28px;
        height: 36px;
       
          background-image: url('./img/btn_cartoon.gif');
        background-repeat: no-repeat;
        background-position: -30px -502px;
        margin-top: 2px; 
    }
    .huilai:hover{
         background-image: url('./img/btn_cartoon.gif');
         background-position: -30px -402px;
    }
    .right{
        width: 55px;
        height: 36px;
        /* border:1px solid; */
        margin-left: 180px;
        line-height: 36px;
        cursor: pointer;
    }
    .span{
        
        font-size: 14px;
       
        color:lightseagreen;
    }
    .span:hover{
        text-decoration: underline;
        color:red;
    }
    .dibu{
        width: 500px;
        height: 200px;
        /* border:1px solid; */
        margin-top: 10px;
        overflow:hidden;
    }
    .pian-a li{
      width: 104px;
      height: 150px;
      /* border:1px solid; */
      float:left;
      margin-top:20px;
      margin-left: 20px;
    }
      .pian-a li img{
          width: 100px;
          height: 96px;
      }
    .chang{
        width: 2000px;
        height: 200px;
        /* border:1px solid; */
    }
    p{
       
        font-size:13px;
        margin: 0;

    }
    .guo{
         margin-top: 10px;
        width: 104px;
        height: 54px;
        /* border:1px solid; */
        cursor: pointer;
    }
    .he{
     color:lightskyblue;
    }
    .he:hover{
        color:red;
        text-decoration: underline;
    }
    .re{
        color:#aaa;
    }
    </style>
</head>
<body>
    <script src="./jquery.js"></script>
<div class="container">
  <div class="toubu">
      <div class="tou1"></div>
     <ul class="baidian">
     <li class="first active"></li>
     <li class="first"></li>
     <li class="first"></li>
     <li class="first"></li>
     </ul>
   <div class="baoguo">
        <div class="laihui"></div>
        <div class="huilai"></div>
   </div>
    <div class="right">
     <span class="span">更多>></span>
    </div>
  </div>
  <div class="dibu">
      <div class="chang">
   <ul class="pian-a">
       <li>
           <img src="./img/01.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/01.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/01.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/01.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
      
   </ul>
   <ul class="pian-a">
       <li>
           <img src="./img/02.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/02.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/02.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/02.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
      
   </ul>
   <ul class="pian-a">
       <li>
           <img src="./img/03.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/03.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/03.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/03.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
      
   </ul>
   <ul class="pian-a">
       <li>
           <img src="./img/04.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/04.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/04.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
       <li>
           <img src="./img/04.jpg" alt="">
        <div class="guo">
               <p class="he">海贼王</p>
           <p class="re">播放12,780</p>
        </div>
       </li>
      
   </ul>
    </div>
  </div>
</div>
</body>
</html>
<script>
   var daxiao= 0;
    function lunImg2(){
         $('.dibu').find('.chang').stop().animate({'margin-left':-500*daxiao},1000)
         $('.baidian  li').eq(daxiao).addClass('active').siblings().removeClass('active')
    }
    // 上一张
     function gunImg2(){
        daxiao = daxiao == 0 ? 3 :daxiao-1;
       lunImg2()
    }
    // 下一张
    function qieImg2(){
       
          daxiao = daxiao==3 ? 0 :daxiao+1;
       
       lunImg2()
    }
    
  
     $('.baidian  li').click(function(){   
          daxiao = $(this).index();
           lunImg2()
               
        
      })
    $('.baoguo .laihui').click(function(){
        
         gunImg2()
       
    })
  
   
    $('.baoguo .huilai').click(function(){
         qieImg2()
    })
   
</script>
